<template>
  <div class="main_bk">
    <img src="./biaoti.jpeg" class="yiqing-photo" />
    <h1 class="yq_title">全国疫情实时更新</h1>
    <div
      id="App"
      style="height: 650px"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>

    <div style="margin-top: 20px">
      <el-tag
        type="danger"
        style="
          margin-left: 30px;
          height: 40px;
          width: 350px;
          border-radius: 30px;
        "
      >
        <div style="font-size: 20px; text-align: center; line-height: 40px">
          想了解最新新闻资讯请看下方网站:
        </div>
      </el-tag>
      <el-dropdown>
        <span class="el-dropdown-link">
          <a target="_blank" href="http://www.gov.cn/fuwu/zt/yqfwzq/yfcs.htm"
            >中国政府网</a
          >
        </span>
      </el-dropdown>
      <el-dropdown style="margin-left: 10px">
        <span class="el-dropdown-link"> 新闻资讯 </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            ><a target="_blank" href="http://www.xinhuanet.com/"
              >新华网</a
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><a
              target="_blank"
              href="https://www.chinamenwang.com/news/t303641/"
              >疫情新闻_疫情资讯-中华门窗网</a
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><a target="_blank" href="https://new.qq.com/tag/158189"
              >疫情-腾讯网</a
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><a
              target="_blank"
              href="http://sub.gxnews.com.cn/staticmores/907/50907-1.shtml"
              >全国疫情速报--广西新闻网</a
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown style="margin-left: 10px">
        <span class="el-dropdown-link"> 视频资讯 </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            ><a target="_blank" href="https://v.qq.com/x/page/c30673n9bfx.html"
              >疫情相关视频_腾讯视频</a
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><a
              target="_blank"
              href="https://www.iqiyi.com/playlist1656694702.html"
              >疫情相关-视频在线观看-热爱与相遇-爱奇艺</a
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><a
              target="_blank"
              href="https://v.youku.com/v_show/id_XNDUyNjI4NzQ0NA==.html"
              >央视新闻联播 2020 国家卫健委:疫情严峻,防控救治是关键</a
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown style="margin-left: 10px">
        <span class="el-dropdown-link"> 防疫教育 </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            ><a
              target="_blank"
              href="http://wenku.baidu.com/link?url=fjH_yqF2-9p_xhgNZK8wpbWB1pLOwRe6SKED1KsB3F5Cw5irY4gyHlYTGdunAEP_nSi9XqD8X9qxeAgK9xcGSAqqWippsP-_FFeakWiQvftXcmlGCg_SCQbZivVd_4mwsmJ5Gq3G43XEM34_XmF2m_"
              >卫生防疫知识教育</a
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><a
              target="_blank"
              href="https://wenku.baidu.com/view/7ee650bf0042a8956bec0975f46527d3250ca643.html"
              >卫生防疫小常识.doc</a
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><a
              target="_blank"
              href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E9%98%B2%E7%96%AB%E6%95%99%E8%82%B2&oq=%25E9%2598%25B2%25E7%2596%25AB%25E6%2595%2599%25E8%2582%25B2%25E5%25AE%25A3%25E4%25BC%25A0&rsv_pq=a98f3ec20000863d&rsv_t=106eXrbTqJCVv94Silf8zczJF8alQpCzhiV%2BPbLt6Ad%2FzW09H9jKEghnTMI&rqlang=cn&rsv_dl=tb&rsv_enter=0&rsv_btype=t&inputT=2241&rsv_sug3=81&rsv_sug1=21&rsv_sug7=100&rsv_sug2=0&rsv_sug4=7250&rsv_sug=2"
              >防疫知识健康教育</a
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div id="App1" style="height: 800px; margin-top: 50px"></div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import moment from "moment";
export default {
  // 将分页查询的疫情数据前十条显示到折线图中
  // X轴显示省份，Y轴显示死亡人数
  //   mounted() {
  //     this.initEchart();
  //   },
  computed: {
    ...mapState("dataList", ["dataList"]),
    ...mapState("article", ["article"]),
  },
  data() {
    return {
      id: 0,
      loading: true,
    };
  },
  // 离开当前页面前销毁组件
  destroyed() {
    clearInterval(this.id);
  },
  created() {
    this.page_query_article({ page: 1, pageSize: 10 });
    this.findData();
    this.id = setInterval(() => {
      this.findData();
    }, 6000);
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
    ...mapActions("article", ["page_query_article"]),
    // 查询数据
    findData() {
      this.page_query({ page: 1, pageSize: 20 }).then(() => {
        let res1 = this.dataList.list.map((item) => {
          let val = [
            item.province,
            item.city,
            moment(item.inputTime).format("YYYY年MM月DD日"),
          ];
          return val;
        });
        let res2 = this.dataList.list.map((item) => {
          return item.dead;
        });
        let res3 = this.dataList.list.map((item) => {
          return item.severe;
        });
        let res4 = this.dataList.list.map((item) => {
          return item.cure;
        });
        let res5 = this.dataList.list.map((item) => {
          return item.suspected;
        });
        let res6 = this.dataList.list.map((item) => {
          return item.outside;
        });
        let res7 = this.dataList.list.map((item) => {
          let val1 = [
            item.province,
            moment(item.inputTime).format("YYYY年MM月DD日"),
          ];
          return val1;
        });
        this.initEchart(res1, res2, res3, res4, res5, res6, res7);
      });
    },
    // 初始化图表
    initEchart(res1, res2, res3, res4, res5, res6, res7) {
      // 初始化前先销毁图表
      echarts.init(document.getElementById("App")).dispose();
      // 基于准备好的dom，初始化echarts实例,myChart是一个对象
      var myChart = echarts.init(document.getElementById("App"));
      var myChart1 = echarts.init(document.getElementById("App1"));
      // 指定图表的配置项和数据
      var option = {
        grid: {
          height: 300,
        },

        tooltip: {
          //设置tip提示
          trigger: "axis",
        },

        legend: {
          //设置区分（哪条线属于什么）
          data: ["累计确诊", "死亡人数", "治愈"],
        },
        color: ["gray", "#FA6F53", "green"], //设置区分（每条线是什么颜色，和 legend 一一对应）

        xAxis: {
          type: "category",
          data: res1,
          axisLabel: {
            formatter(val) {
              return val.split("").join("\n");
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "死亡人数",
            data: res2,
            type: "line",
            lineStyle: {
              normal: {
                color: "#FA6F53",
              },
            },
          },
          {
            name: "累计确诊",
            data: res3,
            type: "line",
            lineStyle: {
              normal: {
                color: "gray",
              },
            },
          },
          {
            name: "治愈",
            data: res4,
            type: "line",
            lineStyle: {
              normal: {
                color: "green",
              },
            },
          },
        ],
      };
      var option1 = {
        title: {
          top: 1,
          left: 40,
          text: "全国各省新增疫情数据",
          subtext: "数据来自网络",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["疑似", "境外输入"],
        },
        grid: {
          left: "3%",
          right: "4%",
          top: 80,
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: res7,
        },
        series: [
          {
            name: "疑似",
            type: "bar",
            data: res5,
          },
          {
            name: "境外输入",
            type: "bar",
            data: res6,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart1.setOption(option1);
    },
  },
};
</script>
<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
.yiqing-photo {
  width: 1600px;
  height: 300px;
  /* margin-left: 100px; */
  /* margin-top: 30px; */
  margin-bottom: 30px;
}
.main_bk {
  background-color: rgb(241, 236, 243);
  margin: -20px;
  border-radius: 50px;
  height: 2000px;
  background-image: url(zong.jpg);
  background-size: 100% 2000px;
}
.yq_title {
  margin-left: 41.5%;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: 20px;
  margin-left: 10px;
}
.el-icon-arrow-down {
  font-size: 5px;
}
</style>
